<template>
    <div class="listDiv">
        <div class="searchDiv"></div>
        <div class="table_box">
        <div class="table_" id="tb">
            <ul class="head">
                <li class="mw180">记录总数</li>
                <li class="mw200">本次抄表示值总</li>
                <li class="mw180">本次抄表示值总（尖）</li>
                <li class="mw160 wcen">尖电价(元/(kw·h)</li>
                <li class="mw160 wcen">峰电价(元/(kw·h)</li>
                <li class="mw160 wcen">平电价(元/(kw·h)</li>
                <li class="mw160 wcen">谷电价(元/(kw·h)</li>
                <li class="mw140 wcen">剩余金额(元)</li>
                <li class="mw140 wcen">总电量(kw·h)</li>
            </ul>
            <div class="body">
                <ul v-for="x in obj.ary" :key="x">
                    <li class="mw180">{{x.deviceNo||'未知'}}</li>
                    <li class="mw200">
                        <el-tooltip class="box-item" effect="dark" :content="x.deviceName" placement="top-start" :disabled="x.deviceName?.length<10">
                            <div class="lineOne pointer">{{x.deviceName||'未知'}}</div>
                        </el-tooltip>
                    </li>
                    <li class="mw180">{{x.pricetype||'未知'}}</li>
                    <li class="mw160 wcen">{{x.jprice||'未知'}}</li>
                    <li class="mw160 wcen">{{x.fprice||'未知'}}</li>
                    <li class="mw160 wcen">{{x.pprice||'未知'}}</li>
                    <li class="mw160 wcen">{{x.gprice||'未知'}}</li>
                    <li class="mw140 wcen">{{x.surplusAmount||'未知'}}</li>
                    <li class="mw140 wcen">{{x.totalCharge||'未知'}}</li>
                </ul>
            </div>
        </div>
        </div>
        <el-pagination
            v-model:currentPage="obj.req.page"
            page-size="10" :total="obj.req.count"
            :page-sizes="[10]"
            @size-change="init"
            @current-change="init"
            layout="total, sizes, prev, pager, next, jumper"  background/>
    </div>
</template>

<script setup>
    import { reactive, getCurrentInstance, ref, toRefs, provide, computed, onUnmounted, onActivated, watch } from 'vue'
    import DelConfirm from '@/components/del_confirm.vue'
    let { proxy } = getCurrentInstance()
    const props = defineProps({
        meter_id: { type: String, default: '0'}
    })

    let obj = reactive({
        ary: [],
        req: {
            page: 1,
            count: 0,
            key: "",
            id: '0'
        }
    });
    
    watch(
        ()=>props.meter_id,
        (val)=>{
            obj.req.id = val
            init()
        },{deep:true}
    )

    let init = ()=>{
        proxy.$ajax({
            url: '/consumption/dataList',
            data: obj.req,
            bfLoading: true,
            isAlertErrorMsg: false
        }).then(d => {
            obj.ary = d.list;
            obj.req.count = d.totalCount;
        }).catch(() => { })
    }
</script>

<style scoped>
</style>